{#if help}
<HelpDisplay class="{helpClass}">
    <div>{@html help}</div>
</HelpDisplay>
{/if}

<div class="control-group vis-option-group vis-option-group-{type} label-{valign}" data-uid="{uid}">
    {#if label}
    <label style="width:{labelWidth||def.labelWidth}" class:disabled class="control-label"
        >{@html label } {#if labelHelp}
        <p class="mini-help mt-1">{@html labelHelp}</p>
        {/if}</label
    >
    {/if}
    <div
        class="controls"
        class:form-inline="inline"
        style="width: calc(100% - {labelWidth||def.labelWidth} - 32px)"
    >
        <slot />
    </div>
    {#if miniHelp}
    <p
        style="padding-left: {inline ? 0 : labelWidth||def.labelWidth}"
        class:mini-help-block="!inline"
        class="mt-1 mini-help {type}"
    >
        {@html miniHelp}
    </p>
    {/if}
</div>

<style>
    .control-group {
        margin-right: 1em; /* Space for help icon */
    }
    p.mini-help-block {
        margin: 0 0 0 18px;
    }
    label.disabled {
        color: #999;
        cursor: default;
    }
    .controls {
        position: relative;
    }
    .control-group.label-middle > .controls {
        vertical-align: middle;
    }
    .control-group.label-middle > .control-label {
        vertical-align: middle;
    }
    .control-group.label-baseline > .controls {
        vertical-align: baseline;
    }
    .control-group.label-baseline > .control-label {
        vertical-align: baseline;
    }
    .control-group.label-top > .controls {
        vertical-align: top;
        position: relative;
        top: 2px;
    }
    .control-group.label-top > .control-label {
        vertical-align: top;
    }
</style>

<script>
    import HelpDisplay from './HelpDisplay.html';

    export default {
        components: { HelpDisplay },

        data() {
            return {
                disabled: false,
                help: false,
                helpClass: false,
                miniHelp: false,
                label: false,
                labelHelp: false,
                inline: false,
                labelWidth: false,
                type: 'default',
                valign: 'baseline',
                uid: ''
            };
        },
        helpers: {
            def: {
                labelWidth: '100px'
            }
        }
    };
</script>
